﻿@page
@model CoreRp.Pages.admin.system.user.vuelistModel
@{
    Layout = "_VueLayout";
}
<div id="app">
    <el-card class="box-card">
        <div>
            <el-form :inline="true">
                <el-form-item label="登陆名">
                    <el-input v-model="Search.LOGINNAME"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名">
                    <el-input v-model="Search.REALNAME"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="LoadData">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>

    <el-card class="box-card">
        <div class="text item">

            <el-table :data="List"
                      stripe
                      style="width: 100%">
                <el-table-column prop="USERCODE"
                                 label="用户代码"
                                 width="380">
                </el-table-column>
                <el-table-column prop="LOGINNAME"
                                 label="登陆名"
                                 width="280">
                </el-table-column>
                <el-table-column prop="REALNAME"
                                 label="真实姓名">
                </el-table-column>
            </el-table>
            <el-pagination v-on:size-change="handleSizeChange"
                           v-on:current-change="handleCurrentChange"
                           :current-page="Page.page"
                           :page-sizes="[2,10,20,50, 100, 150, 500]"
                           :page-size="Page.limit"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="Total">
            </el-pagination>
        </div>
    </el-card>
</div>
@section Scripts{
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                List: [],
                Total:0,
                Search: {
                    REALNAME: '',
                    LOGINNAME: ''
                },
                Page: {
                    page: 1,
                    limit:10
                }
            },
            mounted() {
                this.LoadData()
            },
            methods: {
                LoadData: function () {
                    ax({
                        url: 'api/user/page',
                        method: 'get',
                        params: {
                            page: this.Page.page,
                            limit: this.Page.limit,
                            LOGINNAME: this.Search.LOGINNAME,
                            REALNAME: this.Search.REALNAME
                        }
                    }).then(resp => {
                        this.List = resp.data.List
                        this.Total = resp.data.Total
                    }).catch(err => {
                        console.log(err)
                    })
                },
                handleSizeChange(val) {
                    this.Page.limit = val;
                    setTimeout(() => { this.LoadData()},0)
                },
                handleCurrentChange(val) {
                    this.Page.page = val;
                    setTimeout(() => { this.LoadData() }, 0)
                }
            }
        })
    </script>
}